import { Image, StyleSheet, View, ScrollView } from 'react-native';
import { useState } from 'react'
import { Button } from '@ui-kitten/components';
import { Link, useRouter } from 'expo-router';
import { Icon, IconElement, Input, Text, Layout, Radio, RadioGroup, TopNavigation } from '@ui-kitten/components';
const isArr = [{ text: '是', value: 1 }, { text: '否', value: -1 }]
export default function RegisterScreen() {
  const router = useRouter()
  const [formInfo, setFormInfo] = useState({
    name: ''
  })
  const [selectedIndex, setSelectedIndex] = useState(0);
  const handleComplete = () => {
    router.replace('/(tabs)')
  }
  return <Layout style={{ flexDirection: 'column', flex: 1 }}>
    <TopNavigation alignment='center' title='完善信息'></TopNavigation>
    <ScrollView keyboardShouldPersistTaps='always' style={{ flex: 1, backgroundColor: '#F3F3F3' }}>
      <View style={{ margin: 15, padding: 15, backgroundColor: '#ffffff', borderRadius: 8 }}>
        <Text style={{...styles.label, marginTop: 0}}>
          姓名
        </Text>
        <Input
          size='small'
          style={{ height: 32 }}
          value={formInfo.name}
          placeholder=''
          onChangeText={value => setFormInfo({ ...formInfo, name: value })}
        />
        <Text style={styles.label}>
          联系方式
        </Text>
        <Input
          style={{ height: 32 }}
          size='small'
          value={formInfo.name}
          placeholder=''
          onChangeText={value => setFormInfo({ ...formInfo, name: value })}
        />
        <Text style={{ marginTop: 15 }}>
          是否确诊 ADHD
        </Text>
        <RadioGroup
          selectedIndex={selectedIndex}
          onChange={index => setSelectedIndex(index)}
          style={{display: 'flex', flexDirection: 'row'}}
        >
            <Radio status='primary'>
              是
            </Radio>
            <Radio status='primary'>
              否
            </Radio>
        </RadioGroup>
        <Text style={{...styles.label, marginTop: 0}}>
          爱好
        </Text>
        <Input
          size='small'
          textStyle={{paddingTop: 10, paddingBottom: 10,minHeight: 100}}
          multiline={true}
          textAlignVertical="top"
          numberOfLines={4}
          value={formInfo.name}
          placeholder=''
          onChangeText={value => setFormInfo({ ...formInfo, name: value })}
        />
        <Text style={styles.label}>
          主要困扰
        </Text>
        <Input
          size='small'
          textAlignVertical="top"
          textStyle={{paddingTop: 10, paddingBottom: 10, minHeight: 100}}
          multiline={true}
          numberOfLines={4}
          value={formInfo.name}
          placeholder=''
          onChangeText={value => setFormInfo({ ...formInfo, name: value })}
        />

      </View>

      <Button style={{ width: 260, borderRadius: 50, margin: 'auto', marginTop: 80 }} onPress={ handleComplete }>完成</Button>

    </ScrollView>
  </Layout>
}

const styles = StyleSheet.create({
  label: {
    marginTop: 15,
    marginBottom: 5
  }
})